<div class="container-fluid col-lg-10 col-xl-8 py-5">
    <div class="row">
        <div class="col-md-3 col-sm-12 text-center">
            <img src="{{ asset('storage/avatar-default.png') }}" class="rounded-circle" alt="{{$user->user_name}}"
                 width="100%">
            <h2 class="align-self-center"> {{ $user->user_name }}</h2>
        </div>
        <div class="col-lg-9 col-sm-12">

            @can('update', $user->profile)
                <button class="btn btn-outline-primary btn-sm" wire:click="toggleEditMode">Редактировать</button>
                @if ($editMode)
                    <button class="btn btn-outline-success btn-sm" wire:click="saveProfile">Сохранить</button>@endif
            @endcan
            <div class="row">
                <div class="col-4">
                    <label for="surname" class="form-label">Фамилия</label>
                    @if ($editMode) <input type="text" class="form-control" id="surname" wire:model="surname">
                    @else<h4>{{ $surname }}</h4>@endif
                </div>
                <div class="col-4">
                    <label for="name" class="form-label">Имя</label>
                    @if ($editMode)<input type="text" class="form-control" id="name" wire:model="name">
                    @else<h4>{{ $name }}</h4>@endif
                </div>
                <div class="col-4">
                    <label for="middle_name" class="form-label">Отчество</label>
                    @if ($editMode) <input type="text" class="form-control" id="middle_name" wire:model="middle_name">
                    @else<h4>{{ $middle_name }}</h4>@endif
                </div>
                <div class="col-12">
                    <label for="about" class="form-label">О себе</label>
                    @if ($editMode) <textarea class="form-control" id="about" wire:model="about"></textarea>
                    @else<p>{{ $about }}</p>@endif
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="my-3 col-12">
            <h4>Навыки</h4>
        </div>
        @foreach($user->skills as $skill)
            <div class="col-12 border mb-3">
                <div class="mb-3">
                    <label for="editingSkillDescription" class="form-label">Описанние опыта</label>
                    <p class="h6">{{ $skill->description }}</p>
                </div>
                <div class="mb-3">
                    <label for="editingSkillSkills" class="form-label">Навыки</label>
                    <p class="h6">{{ $skill->skills }}</p>
                </div>
            </div>
        @endforeach
        <div class="col-12">
            <button class="btn btn-outline-primary btn-sm" wire:click="toggleAddSkill">Добавить навык</button>
            @if($skillAddMode)<button class="btn btn-outline-success btn-sm" wire:click="newSkillSave">Сохранить</button>@endif
        </div>
        @if($skillAddMode)
            <div class="col-12 border mb-3">
                <div class="mb-3">
                    <label for="newSkillDescription" class="form-label">Описанние опыта</label>
                    <textarea class="form-control" id="newSkillDescription" wire:model="newSkillDescription"></textarea>
                </div>
                <div class="mb-3">
                    <label for="newSkillSkills" class="form-label">Навыки</label>
                    <input type="text" class="form-control" id="newSkillSkills" wire:model="newSkillSkills">
                </div>
            </div>
        @endIf
    </div>
</div>
